@property --animation-tick {
  syntax: '<number>';
  inherits: false;
  initial-value: 1000;
}
@property --height {
  syntax: '<number>';
  inherits: false;
  initial-value: 0.1;
}
@property --amplitude {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.container {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
}
.loading {
  width: 200px;
  height: 300px;
  background: paint(waveDraw);
  border: 2px solid #bbb;
  --amplitude: 3; /* 振幅 */
  --gap: 28; /* 间距 */
  --animation-tick: 500;  /* 运动速度 */
  --height: 0.9;  /* 进度 */
  --color1: rgba(0, 0, 255, 0.4);
  --color2: rgba(0, 0, 255, 0.3);
  --color3: rgba(0, 0, 255, 0.2);
  
  animation: move 20s infinite linear;
  transition: --amplitude 2s, --height 8s;
}
.loading:hover {
  --amplitude: 10; /* 振幅 */
  --height: 0;  /* 进度 */
}

@keyframes move {
  100% {
    --animation-tick: 0;
  }
}
